<template>
  <div style="display: flex;align-items: center;">
    <el-select v-model="item.valueText" :placeholder="item.placeholder" size="small"
               class="w-140 mr-10" @change="sectionChange($event,index)" v-for="(item,index) in list" :key="index"
               :clearable="true">
      <el-option :label="items.name" :value="items.id" v-for="items in item.list"
                 :key="items.id"></el-option>
    </el-select>
  </div>
</template>

<script>

export default {
  name: 'studentMultiple',
  props: ['property'],
  data() {
    return {
      list: [],
      nameList: []
    }
  },
  watch: {
    property: {
      immediate: true,
      handler(val) {
        this.list = [];
        this.list.push(this.getJson(val))
        if (val.child) {
          for (let i in val.child) {
            this.list.push(this.getJson(val.child[i]))
            this.nameList.push(0)
          }
        }
        this.propertyForm = this.getJson(val)
        this.getInitList()
      }
    }
  },
  created() {
    // this.classList()
  },
  methods: {
    // 第一个下拉框信息
    async getInitList() {
      // console.log('select求求接口:')
      let data = await this.$fetch(this.list[0].api, {p: this.page});
      if (!data.code) {
        if (this.list[0].api === 'book_cat/index') {
          this.bookCateFn(data.list)
        } else {
          let getList = this.getJson(this.list)
          let newArray = []
          let creat_list = data.list.data || data.list
          for (let i in creat_list) {
            let newObject = {}
            newObject.id = creat_list[i].id
            newObject.name = creat_list[i][getList[0].keyName]
            newArray.push(newObject)
          }
          getList[0].list = this.getJson(newArray)
          this.list = getList
          // console.log('最后展示判断是否有值')
          if (this.list[0].valueText) {
            this.getNextListFn(1)
          }
        }
      }
    },
    // 后续下拉框信息
    async getNextListFn(index) {
      if (this.list[index].api) {
        let data = await this.$fetch(this.list[index].api, {p: this.page, section_id: this.list[index - 1].valueText});
        if (data.code === 0) {
          let getList = this.getJson(this.list)
          let newArray = []
          for (let i in data.list.data) {
            let newObject = {}
            newObject.id = data.list.data[i].id
            newObject.name = data.list.data[i][getList[index].keyName]
            newArray.push(newObject)
          }
          getList[index].valueText = this.list[index].valueText ? this.list[index].valueText : ''
          getList[index].list = this.getJson(newArray)
          this.list = getList
        }
      } else {
        let getList = this.getJson(this.list)
        getList[index].list = this.getJson(getList[index - 1].list[getList[index - 1].valueText].child)
        getList[index].valueText = ''
        this.list = getList
      }
      this.$emit('updateVal', {'select': this.list, nameOption: this.nameList})
    },
    sectionChange(val, index) {
      // 判断下个接口
      // if(this.list[index].placeholder=== "类目"){
      //   // valueText: 1
      //   let list_ = JSON.parse(JSON.stringify(this.list[index+1]))
      //   let list_l = this.list[index].list[this.list[index].valueText].child
      //   let list_a = []
      //   for(let index in list_l){
      //     list_a.push(list_l[index])
      //   }
      //   list_.list = list_a
      //   this.$emit(this.list, 1, list_)
      // }else{
      if(!index && !this.list[index].valueText){
        this.list[index+1].valueText = ''
        this.list[index+1].list = []
      }
      // if(this.list[index].valueText){
        if(!index && !val){
          this.nameList = []
        }
        for (let index_ in this.list[index].list) {
          let item = this.list[index].list[index_]
          if (item.id === val) {
            this.nameList[index] = item.name
          }
        }
        if (index < this.list.length - 1) {
          this.getNextListFn(index + 1)
        } else {
          this.$emit('updateVal', {'select': this.list, nameOption: this.nameList})
        }
      // }
    },
    // 图书分类
    bookCateFn(list_) {
      let getList = this.getJson(this.list)
      let obj_son = {};
      for (let i in list_) {
        if (list_[i].tid === 0) {
          // 一级分类
          obj_son[list_[i].id] = obj_son[list_[i].id] || {}
          obj_son[list_[i].id].id = list_[i].id
          obj_son[list_[i].id].name = list_[i].name
          obj_son[list_[i].id].child = obj_son[list_[i].id].child || {}
        } else {
          obj_son[list_[i].tid].child[list_[i].id] = obj_son[list_[i].tid].child[list_[i].id] || {}
          obj_son[list_[i].tid].child[list_[i].id].id = list_[i].id
          obj_son[list_[i].tid].child[list_[i].id].name = list_[i].name
        }
      }
      getList[0].list = this.getJson(obj_son)
      this.list = getList
    },
    getJson(item){
      return JSON.parse(JSON.stringify(item))
    }
  },
  mounted() {
  }
}
</script>
